
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        Simple Stack Visualization
    </title>

    <!-- css sheet for how the page is laid out -->

    <link rel="stylesheet" href="visualizationPageStyle.css">


    <!-- jqueury stuff.  Only used for the animation speed slider. -->
    <link rel="stylesheet" href="ThirdParty/jquery-ui-1.8.11.custom.css">

    <script src="ThirdParty/jquery-1.5.2.min.js"></script>
    <script src="ThirdParty/jquery-ui-1.8.11.custom.min.js"></script>

    <!-- Javascript for the actual visualization code -->
    <script type = "text/javascript" src = "AnimationLibrary/CustomEvents.js"> </script>
    <script type = "text/javascript" src = "AnimationLibrary/UndoFunctions.js"> </script>
    <script type = "text/javascript" src = "AnimationLibrary/AnimatedObject.js"> </script>
    <script type = "text/javascript" src = "AnimationLibrary/AnimatedLabel.js"> </script>
    <script type = "text/javascript" src = "AnimationLibrary/AnimatedCircle.js"> </script>
    <script type = "text/javascript" src = "AnimationLibrary/AnimatedRectangle.js"> </script>
    <script type = "text/javascript" src = "AnimationLibrary/AnimatedLinkedList.js"> </script>
    <script type = "text/javascript" src = "AnimationLibrary/HighlightCircle.js"> </script>
    <script type = "text/javascript" src = "AnimationLibrary/Line.js"> </script>
    <script type = "text/javascript" src = "AnimationLibrary/ObjectManager.js"> </script>
    <script type = "text/javascript" src = "AnimationLibrary/AnimationMain.js"> </script>
    <script type = "text/javascript" src = "AlgorithmLibrary/Algorithm.js"> </script>
    <script type = "text/javascript" src = "AlgorithmLibrary/SimpleStack.js"> </script>

<style>
    .box {
        margin-top: 150px;
        width: 50px;
        height: 50px;
        background-color: green;
        position: absolute;
        left: 0;
        top: 0;
        color: white;
        font-size: 30px;
        text-align: center;
        line-height: 50px;
    }
</style>
</head>

<body  class="VisualizationMainPage">

<div id = "container">

    <div id="header">
        <h1>FIFO页面置换算法</h1>
    </div>

    <div id = "mainContent" style="height: 700px">
        <div style="margin-top: 10px;margin-left: 5px">
            物理块数 <input type="text" value="7012030423">  页面号 <input type="text" value="3">&nbsp;&nbsp;<input type="button" value="push">
        </div>

        <div id="center">
            <div class="box">1</div>
        </div>


        <input type="button" value="移动到400px" id="btn1"/>
        <input type="button" value="移动到800px" id="btn2"/>
    </div> <!-- mainContent -->

<div id="footer">
    <p><a href="Algorithms.html">Algorithm Visualizations</a></p>
</div>

</div><!-- container -->
</body>
<script src="common.js"></script>
<script>
    //点击按钮移动div

    my$("btn1").onclick = function () {
        console.log(111)
        $('<div id="dv" class="box">2</div>').appendTo($("#center"))
        animate(my$("dv"), 400);
    };
    my$("btn2").onclick = function () {
        animate(my$("dv"), 800);
    };

    //匀速动画
    function animate(element, target) {
        //清理定时器
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            //获取元素的当前位置
            var current = element.offsetLeft;
            //移动的步数
            var step = 10;
            step = target > current ? step : -step;
            current += step;
            if (Math.abs(current - target) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                clearInterval(element.timeId);
                element.style.left = target + "px";
            }
        }, 20);
    }
</script>
</html>
